import React, {PureComponent } from 'react';
import './index.less';
import { Carousel, WingBlank, Icon, Button } from 'antd-mobile';
import connect from '@/connect.js'
import ProductRating from '@/components/productRating/index.js'
import Asking from '@/components/asking/index.js'
import Parameters from '@/components/parameters/index.js'
import Recommendation from '@/components/recommendation/index.js'
import MoreParameters from '@/components/moreParameters/index.js'
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let moneyKeyboardWrapProps;
if (isIPhone) {
    moneyKeyboardWrapProps = {
        onTouchStart: e => e.preventDefault()
    };
}
@connect
class dropDownForm extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: ['https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
            'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E',
            'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E'],
            imgHeight: 176,
            dataMoney: ['8.8家具节', '跨店每200减20', '满600减300'], 
            dataRule: ['7天无理由退货', '享受免费送装'],
            productDetails: [
                {
                    name:'规格',
                    details: '型号/颜色/尺寸',
                },
                {
                    name:'地址',
                    details: '朝阳区居然之家金源店',
                    time: '营业时间（10:00~22:00）'
                },
                {
                    name:'发货',
                    details: '发货地广州  现在购买3天内发货',
                },
            ]
          }    
        }
        componentDidMount() {
          }
    render() {
        const { data,imgHeight } = this.state
        return (
            <div className="productDetails">
            {/* 轮播图 */}
        <Carousel
        dots={false}
          autoplay={false}
          infinite
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        >
          {this.state.data.map((val, index) => (
            <div
            className="carousel"
                style={{
                    backgroundImage: `url(${val})`,
                    backgroundSize: '100% 100%',
                }}
                >
                <div
                className="carouseTwol"
                >
                {Number(index + 1)}/{Number(this.state.data.length)}
                </div>
                </div>                
          ))}
        </Carousel>
        {/* 商品价格 */}
        <div className="commodity">
        <div>
        <div className="commodity-loop">
                {
                    this.state.dataMoney.map((val, index) => {
                        return <div className="commodity-Coupons" style={{marginLeft: index === 0 ? '0px' :'5px' ,}}>{val}</div>
                    })
                }
            </div>
            <div className="collect-Coupons">
                    <span className="collect">领券</span>
                    <Icon color={'#F93E0E'} type={'right'} />
                </div>
        </div>
        {/* 价格 */}
       <div className="commodity-money">
           <span className="commodity-moneySmall"><span className="moneySmall">￥</span>499</span> <span className="commodity-moneyMany">~1999</span>
       </div>
       {/* 名称 */}
       <div className="commodity-name">
       云朵软包瑞典世界大奖设计师为你创造一款圆润曲面座架舒适型沙发
       </div>
       {/* 规则 */}
       <div className="commodity-rule">
       {
                    this.state.dataRule.map((val, index) => {
                        return <div className="commodity-rulename" style={{marginLeft: index === 0 ? '0px' :'5px' ,}}>{val}</div>
                    })
                }
       </div>
        </div>

        {/* 商品详情 */}
        <div className="productDetails">
        {
            this.state.productDetails.map((val, index) => {
                return <div style={{marginTop: index === 0 ? '0px' : '18px'}}>
                <div>
                    <span className='productDetails-name'>{val.name}</span>
                    <span className='productDetails-details'>{val.details}</span>
                    <Icon style={{float: 'right'}} color={'#555555'} type={'ellipsis'} />
                </div>
                <div className="productDetails-time">
                    {
                        val.time && val.time ?
                        <span>{val.time}</span>
                        :
                        ''
                    }
                    </div>
                </div>
            })
        }
        </div>

        {/* 商品评分 */}
        <ProductRating></ProductRating>
        {/* 大家都在问 */}
        <Asking></Asking>
        {/* 大图 */}
        <img className="big-pic" src={'https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=1238000549,973637751&fm=218&app=92&f=JPG?w=121&h=75&s=21D4EB22CED04DF76C0D2CE30300101E'} />
        {/* 商品参数 */}
        <Parameters></Parameters>
        {/* 店家组合推荐 */}
        <Recommendation></Recommendation>
        {/* 更多商品 */}
        <MoreParameters></MoreParameters>
        {/* 购物车 */}
        <div className="shopping-cart">
        <span className="addCartIcon">客服</span>
        <span className="addCartIcon" style={{marginLeft: '10px'}}>店铺</span>
        <Button className="addCart">添加购物车</Button>
        <Button className="addCart-buy">立即购买</Button>
        </div>
                  </div>
        );
    }
}
export default dropDownForm